import React, {PureComponent} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
import {setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle, colors} from '../chart/util/common'
import baseChart from '../chart/base-chart'
import {getTodayTallying} from '../../action/map.action'
import {connect} from 'react-redux'

class Bar extends PureComponent {

    shouldComponentUpdate({todayTallying}) {
        return this.props.todayTallying !== todayTallying
    }

    componentDidUpdate() {
        const {todayTallying} = this.props
        this.renderChart(todayTallying)
    }

    renderChart = (todayTallying) => {
        this.myChart.setOption({
            series: [{
                data: [todayTallying.get('待理货'), todayTallying.get('理货完成'), todayTallying.get('理货中')],
            }],
        });

    }

    componentDidMount() {
        const {setChartInstance, dispatch, todayTallying} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        dispatch(getTodayTallying({}))
        const option = {
            title: setTitle({text: '今日订单备货监控图'}),
            tooltip: {
                ...tooltip,
                formatter: function (params) {
                    let relVal = params[0].name;
                    relVal += params[0].value;
                    return relVal;
                },
                position: function (pos, params, dom, rect, size) {
                    // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                    const obj = {top: pos[1]};
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                    return obj;
                }
            },
            axisPointer: {
                type: 'line',
                axis: 'auto'
            },
            xAxis: {
                data: ['今日需完成', '今日已完成', '今日新增加'],

                axisLine: {
                    show: false,
                },
                axisLabel: {
                    rotate: -60,
                    interval: 0,
                    showMaxLabel: true,
                    showMinLabel: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            grid: {
                left: '5%',
                right: '15%',
                top: '15%',
                bottom: '15%',
                containLabel: true
            },
            yAxis: {
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '销量',
                type: 'bar',
                barMaxWidth: 30 * scale,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex]
                        }
                    },
                },
                markPoint: {
                    symbol: 'circle',
                    symbolSize: 50,
                    symbolOffset: [0, 0],
                    silent: true

                },
                data: [todayTallying.get('待理货'), todayTallying.get('理货完成'), todayTallying.get('理货中')]

            }],
            label: {
                normal: {
                    ...baseTextStyle,
                    show: true,
                    position: 'top'
                },
                emphasis: {
                    ...baseTextStyle,
                    show: true,
                    position: 'top'
                }
            }

        };
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div className="tallying-bar-chart" ref='chart'/>
        )
    }

}

function mapStateToProps({todayTallying}) {
    return {todayTallying}
}
export default baseChart(connect(mapStateToProps)(Bar))